import React, { useRef, useState } from 'react'

export default function App() {
    const [name,setName]=useState<string>('xiaoming') //可以用泛型自主规定类型
    const [list,setList]=useState<Array<string>>([])  //字符串数组
    const myref =useRef<HTMLInputElement>(null)       //需要传入null
    return (
        <div>
            {name}
            <button onClick={()=>{
                setName('王')
            }}>改名字</button>
            <hr/>
            <input ref={myref}/>
            <button onClick={()=>{
                setList([(myref.current as HTMLInputElement).value,...list])
            }}>添加</button>
            {list.map((item,index)=>
                <li key={index}>{item}</li>
            )}
            <hr/>
            <Child text="孩子"/>
        </div>
    )
}


interface Ifunc{
    text:string
}
// function Child(props:Ifunc){
//     return(
//         <div>{props.text}</div>
//     )
// }
const Child:React.FC<Ifunc>=(props)=>{
    return(
        <div>{props.text}</div>
    )
}